<template>
  <div>
    <div id="dataCard">
      <el-card class="box-card">
        <div class="box-card-div">
          <el-avatar :size="80" :src="circleUrl">
            <div id="box-card-solid-div">
              <i class="el-icon-message-solid" />
            </div>
          </el-avatar>
          <div class="box-card-text-div">
            <span>13</span>
            <br>
            <span>代收费数据（条）</span>
          </div>
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="box-card-div">
          <el-avatar :size="80" :src="circleUrl">
            <div id="box-card-card-div">
              <i class="el-icon-bank-card" />
            </div>
          </el-avatar>
          <div class="box-card-text-div">
            <span>13208.5</span>
            <br>
            <span>待收费金额（元）</span>
          </div>
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="box-card-div">
          <el-avatar :size="80" :src="circleUrl">
            <div id="box-card-ticket-div">
              <i class="el-icon-s-ticket" />
            </div>
          </el-avatar>
          <div class="box-card-text-div">
            <span>9</span>
            <br>
            <span>欠费数据（条）</span>
          </div>
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="box-card-div">
          <el-avatar :size="80" :src="circleUrl">
            <div id="box-card-order-div">
              <i class="el-icon-s-order" />
            </div>
          </el-avatar>
          <div class="box-card-text-div">
            <span>13196</span>
            <br>
            <span>欠费金额（元）</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="echartsDiv">
      <div class="piediv">
        <el-card class="fontDiv">
          <span class="echartsspan">商铺租售情况</span>
        </el-card>

        <el-card class="echartspie-card">
          <div id="echartspie" style="with:100%;height:350px">
          </div>
        </el-card>
      </div>

      <div class="piediv">
        <el-card class="fontDiv">
          <span class="echartsspan">月度收费</span>
        </el-card>

        <el-card class="echartsbar-card">
          <div id="echartsbar" style="with:100%;height:350px">
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "homePage",

  data() {
    return {};
  },
  methods: {
    getChartsPie() {
      //这要写在一个新的脚本里，并且这对script标签要记得放在呈现图表的盒子之后
      let mCharts = echarts.init(document.getElementById("echartspie"));
      mCharts.setOption({
        title: {
          text: "商铺租售比率",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
        },

        //roseType: 'angle', // 丁达尔图
        //radius: '55%',
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "70%",
            data: [
              { value: 1048, name: "空置" },
              { value: 735, name: "出租" },
              { value: 580, name: "出售" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },

    // 获取柱状图
    getChartsBar() {
      let mCharts = echarts.init(document.getElementById("echartsbar"));
      mCharts.setOption({
        xAxis: {
          type: "category",
          data: [
            "2023-05",
            "2023-06",
            "2023-07",
            "2023-08",
            "2023-09",
            "2023-10",
          ],
        },

        yAxis: {
          type: "value",
        },
        title: {
          text: "各月收费情况",
          left: "center",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.getChartsPie();
    this.getChartsBar();
  },
};
</script>

<style lang="less" scoped>
#dataCard {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  padding-right: 10px;
}

.box-card {
  width: 100%;
  height: 100%;
  margin: 10px 0px 10px 10px;
}

.box-card-div {
  display: flex;
}

#box-card-solid-div {
  background-color: #f2ebfb;
  line-height: 80px;
}

#box-card-card-div {
  background-color: #edf8fe;
  line-height: 80px;
}

#box-card-ticket-div {
  background-color: #fff7e4;
  line-height: 80px;
}

#box-card-order-div {
  background-color: #fff2f5;
  line-height: 80px;
}

.el-icon-message-solid {
  color: #7b1ae1;
  font-size: 40px;
  margin-top: 20px;
}

.el-icon-bank-card {
  color: #4ab8ff;
  font-size: 40px;
  margin-top: 20px;
}

.el-icon-s-ticket {
  color: #ff8b58;
  font-size: 40px;
  margin-top: 20px;
}

.el-icon-s-order {
  color: #fc5b87;
  font-size: 40px;
  margin-top: 20px;
}

.box-card-text-div {
  text-align: left;
  margin-left: 10px;
  margin-top: 17px;
}
.echartsspan {
  border-left: 4px solid #1890ff;
  padding-left: 10px;
}
.echartsDiv {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  margin: 10px 0px 10px 10px;
}
.piediv {
  width: 100%;
  margin-right: 10px;
}
.fontDiv {
  width: 100%;
}
.echartsbar-card {
  width: 100%;
  height: 100%;
}
.echartspie-card {
  width: 100%;
  height: 100%;
}
</style>